<template>
  <div>
    <el-drawer v-model="drawerStore.articleDrawer" direction="rtl">
      <template #header>
        <h4>文章</h4>
      </template>
      <template #default>
        <el-form
          :model="formData"
          label-width="120px"
          style="margin-top: 20px; max-width: 600px;"
        >
          <el-form-item label="文章标题">
            <el-input v-model="formData.title" disabled/>
          </el-form-item>
          <el-form-item label="文章摘要">
            <el-input
              required
              v-model="formData.summary"
              type="textarea"
              :rows="3"
            />
          </el-form-item>
          <el-form-item label="分类名称">
            <el-input v-model="formData.categoryId" required/>
          </el-form-item>
          <el-form-item label="文章链接">
            <el-input v-model="formData.sourceUrl" disabled/>
          </el-form-item>
          <el-form-item label="文章内容">
            <el-input
              required
              v-model="formData.content"
              type="textarea"
              :rows="5"
            />
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick">确认</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { useDrawerStore } from '@/stores/drawer';

const drawerStore = useDrawerStore()
const formData = drawerStore.articleRow

function cancelClick(){
  drawerStore.articleDrawer = false
}

function confirmClick(){
  drawerStore.articleDrawer = false
}
</script>

<style scoped>

</style>
